<template>
  <div>
      <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
 
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card class="box-card">
            <el-row>
                <el-col>
                    <!-- 消息提示 -->
                    <el-alert title="添加商品信息" center :closable="false" type="info" show-icon> </el-alert>
                </el-col>
                
            </el-row>
            <!-- 步骤条 -->
            <el-steps align-center class="progress" :space="200" :active="selectedActive-0" finish-status="success">
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <!-- tab标签 -->
            <el-form label-position="top" :model="addGoodsForm" :rules="addGoodsFormRules" ref="addGoodsFormRef" >
                <el-tabs v-model="selectedActive" type="border-card" tab-position="left" :before-leave="beforeLeaveTabs" @tab-click="changeTabs">
                    <el-tab-pane label="基本信息" name="0">
                        <el-form-item label="商品名称"  prop="goods_name">
                            <el-input v-model="addGoodsForm.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格"  prop="goods_price">
                            <el-input v-model="addGoodsForm.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="商品重量"  prop="goods_weight">
                            <el-input v-model="addGoodsForm.goods_weight"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量"  prop="goods_number">
                            <el-input v-model="addGoodsForm.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类" prop="cat_name">
                            <el-cascader
                                v-model="addGoodsForm.goods_cat"
                                :options="goodsCatOptions"
                                :props="goodsCatProps"
                                @change="goodsCatChange"
                                clearable>
                            </el-cascader>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品参数" name="1">
                        <el-form-item :label="item.attr_name" v-for="item in manyParamsList" :key="item.attr_id">
                            <el-checkbox-group v-model="item.attr_vals"    size="small">
                                <el-checkbox class="params" :key="index1" v-for="(item1,index1) in item.attr_vals" :label="item1" border></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品属性" name="2">
                        <!-- 商品属性面板 -->
                        <el-form-item :label="item.attr_name" v-for="item in onlyParamsList" :key="item.attr_id">
                            <el-input v-model="item.attr_vals"></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品图片" name="3">
                        <el-form-item>
                            <el-upload
                            class="upload-demo"
                            :action="uploadURL"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :headers="headerObj"
                            list-type="picture" 
                            :on-success="handleSuccess"
                            style="width:400px;">
                                <el-button size="small" type="primary">点击上传</el-button>
                               
                            </el-upload>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品内容" name="4">
                        <!-- 富文本组件区域 -->
                        <quill-editor class="ql-editor" v-model="addGoodsForm.goods_introduce">

                        </quill-editor>
                        <!-- 点击上传添加商品的信息 -->
                        <el-button style="margin:15px" type="primary" @click="addGoods">添加商品</el-button>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
            
        </el-card>
        <!-- 当点击图片进行预览时，弹出对话框 -->
        <el-dialog
        title="图片预览"
        :visible.sync="isPreviewVisible"
        width="50%"
       >
            <el-image :src="previewPath" style="width:100%;"></el-image>
        </el-dialog>
  </div>
</template>

<script>
// 导入lodash
import _ from "lodash";
export default {
    data(){
        return{
            // 添加商品表单数据
            addGoodsForm:{
                goods_name:"",
                goods_price:0,
                goods_weight:0,
                goods_number:0,
                // 商品所属的分类数组
                goods_cat:[],
                // 上传图片的路径数组
                pics:[],
                // 商品的详细描述
                goods_introduce:"",
                attrs:[]
            },
            // 添加商品表单规则
            addGoodsFormRules:{
                //商品名称
                goods_name:[
                    { required: true, message: '请输入商品名称', trigger: 'blur' }
                ],
                // 商品价格
                goods_price:[
                    { required: true, message: '请输入商品价格', trigger: 'blur' }
                ],
                // 商品重量
                goods_weight:[
                    { required: true, message: '请输入商品重量', trigger: 'blur' }
                ],
                // 商品数量
                goods_number:[
                    { required: true, message: '请输入商品数量', trigger: 'blur' }
                ]
            },
            // 级联选择器选项列表
            goodsCatOptions:[],
            // 级联选择器的展示规则
            goodsCatProps:{
                expandTrigger: 'hover',
                label:"cat_name",
                value:"cat_id",
                children:"children"
            },
            // 设定标签页的默认显示页
            selectedActive: '0',
            // 要显示的商品参数列表
            manyParamsList:[],
            // 要显示的商品属性列表
            onlyParamsList:[],
            // 商品的属性
            goodsParamsValsList:[],
            // 已选择的商品参数列表
            selectedParamsList:[],
            // 上传图片的路径
            uploadURL:"http://127.0.0.1:8888/api/private/v1/upload",
            // 图片上传组件的headers请求头对象
            headerObj:{
                Authorization://这个是为请求头对象，添加Token验证段Authorization
                window.sessionStorage.getItem("token")

            },
            // 当点击图片预览时，是否弹出弹窗
            isPreviewVisible:false,
            // 当前要进行预览的图片路径
            previewPath:"",
            
        
        }
    },
    methods:{
        
        // 获取级联选择器的商品分类数据
        async getGoodsCatList(){
            // 获取数据
            const {data:res} = await this.$http.get("categories")
            // 判断服务器返回的状态码
            if(res.meta.status !== 200){
                return this.$message.error("获取数据失败")
            }

            // 将数据保存在展示列表中
            this.goodsCatOptions = res.data
            console.log(res);
            
        },
        // 级联选择器选择选项后的方法
        goodsCatChange(){
            console.log(this.addGoodsForm.goods_cat);
            // 判断已选择选项的长度
            if(this.addGoodsForm.goods_cat.length !== 3){
                this.addGoodsForm.goods_cat = []
            }
            
        },
        // 在离开当前页的判断 activeName：当前标签, oldActiveName：之前的标签
        beforeLeaveTabs(activeName, oldActiveName){
            // console.log(activeName)
            // console.log(oldActiveName);
            // 对标签进行判断
            if(oldActiveName === "0" && this.addGoodsForm.goods_cat.length !== 3){
                this.$message.error('请先选择商品分类！')
                return false
            }
        },
        // 根据id值从后台获取商品数据
        async getManyGoodsInfo(){
            // 向服务器发起请求获取数据
            const {data:res} = await this.$http.get(`categories/${this.goodsCateId}/attributes`,{
                params:{sel:"many"}
            })
            // 判断服务器返回的状态码
            if(res.meta.status !== 200){
                return this.$message.error("获取商品参数失败")
            }
            // 对返回的数据进行遍历，将参数属性进行分割
            res.data.forEach(item=>{
                item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(" ")
            })

            // 将返回的参数信息保存在参数列表中
            this.manyParamsList = res.data
            // 
            
            console.log(res);
            
        },
        // 根据Id值获取商品属性
        async getOnlyGoodsInfo(){
            // 向服务器发起请求获取数据
            const {data:res} = await this.$http.get(`categories/${this.goodsCateId}/attributes`,{
                params:{sel:"only"}
            })
            // 判断服务器返回的状态码
            if(res.meta.status !== 200){
                return this.$message.error("获取商品参数失败")
            }
         

            // 将返回的参数信息保存在参数列表中
            this.onlyParamsList = res.data
            // 
            
            console.log(res);
        },
        // 当切换tab页时触发的事件
        changeTabs(){
            // 判断当期标签页的index是否为1
            if(this.selectedActive === "1"){
            
                this.getManyGoodsInfo()
            }else if(this.selectedActive === "2"){
                this.getOnlyGoodsInfo()
            }
        },
        // file 要处理的文件 fileList要上传的文件列表
        handleRemove(file) {
      
            // 获取将要删除图片的临时路径
            const filePath = file.response.data.tmp_path
            // 从pics数组中，找到这个图片的索引
            const index = this.addGoodsForm.pics.findIndex(
                x => x.pic === filePath
            )
            // 调用数组的splice方法，将图片信息从pics数组中移除
            this.addGoodsForm.pics.splice(index,1)
            console.log(this.addGoodsForm);
            
        },
        // 上传图片预览
        handlePreview(file) {
            console.log(file);
            //获取当前要进行预览图片的url路径
            this.previewPath = file.response.data.url
            this.isPreviewVisible = true
        },
        // 上传图片成功的反馈信息
        handleSuccess(response, file, fileList){
         
            // 拼接一个图片成功的事件
            const picInfo = {
                pic:response.data.tmp_path
            }
            // 将图片信息进行保存
            this.addGoodsForm.pics.push(picInfo)
            
            
        },
        // 点击添加商品按钮，进行商品信息上传
        addGoods(){
            console.log(this.addGoodsForm);
            // 上传之前需要对数据进行预验证
            this.$refs.addGoodsFormRef.validate(
                async valid =>{
                    if(!valid){
                        return this.$message.error("请填写必要的信息")
                    }
                    // 向服务器进行商品的提交上传
                    // 进行表单数据的深拷贝
                    const form = _.cloneDeep(this.addGoodsForm)
                    form.goods_cat = form.goods_cat.join(",")
                    console.log(form)
                    // 处理动态参数
                    this.manyParamsList.forEach(
                        item => {
                            const newInfo = {
                                attr_id:item.attr_id,
                                attr_vals:item.attr_vals
                            }

                            this.addGoodsForm.attrs.push(newInfo)
                        }
                        
                    )
                    // 处理静态属性
                    this.onlyParamsList.forEach(
                        item => {
                            const newInfo = {
                                attr_id:item.attr_id,
                                attr_vals:item.attr_vals
                            }
                            this.addGoodsForm.attrs.push(newInfo)
                        }
                    )
                    // 
                    form.attrs = this.addGoodsForm.attrs
                    console.log(form)
                    // 发起请求添加商品
                    // 商品的名称，必须是唯一的
                    const {data:res} = await this.$http.post("goods",form)

                    // 判断服务器返回来的数据
                    if(res.meta.status !== 201){
                        return this.$message.error("添加商品失败")
                    }
                    // 添加成功
                    this.$message.success("添加商品成功")
                    // 
                    this.$router.push("/goods")

                }

            )
            
        }
    },
    created(){
        // 当进入页面后，获取级联选择器的数据
        this.getGoodsCatList()
    },
    computed:{
        // 
        goodsCateId(){
            if(this.addGoodsForm.goods_cat.length === 3){
                return this.addGoodsForm.goods_cat[2]
            }
            return null
        }
    }
}
</script>

<style> 
    .progress{
        margin: 20px 0;
        
    }
    .params{
        margin: 0 10px 0 0 !important;
    }
    .ql-editor{
        min-height: 300px;
        margin: 0;
    }
</style>